<!DOCTYPE html>
<html>

    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
          html { height: 100% }
          body { height: 100%; margin: 0px; padding: 0px }
          #map_canvas { height: 100% }
        </style>

    <title>GuiGps</title>

        <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false">
        </script>

        <script type="text/javascript">

            var drone;
            var points;
            var map;
            var polyline;

            function initialize()
            {
                var point;
                var pointNum;

                // drone
                drone = new google.maps.Marker ({
                    title: 'drone',
                    position: new google.maps.LatLng(49.042983, 2.084826),
                    icon: new google.maps.MarkerImage('helicopter.png')
                });

                // map
                var mapOptions = {
                    zoom: 17,
                    center: drone.getPosition(),
                    mapTypeId: google.maps.MapTypeId.HYBRID
                };
                map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

                // put drone on map
                drone.setMap(map);

                // points
                points = new Array();
                pointNum=0;
                // add point
                google.maps.event.addListener(map, 'click', function(event)
                {
                    point = new google.maps.Marker ({
                        map: map,
                        draggable: true,
                        title: '#' + pointNum,
                        position: event.latLng,
                    });

                    // del point
                    google.maps.event.addListener (point, 'click', function(event)
                    {
                        this.setMap(null);
                        for ( _point in points )
                        {
                            if ( points[_point] == this ) 
                            {
                                points.splice(_point, 1);
                            }
                        }
                        polylineDisp();
                    });

                    // drag point
                    google.maps.event.addListener(point, 'drag', function(event) {
                        polylineDisp();
                    });

                    points.push (point);
                    point.setMap(map);
                    pointNum++;
                    polylineDisp();
                });

                // line
                polyline = new google.maps.Polyline();
            }

            function polylineDisp()
            {
                var latslens = new Array();
                for ( _point in points )
                {
                    latslens.push (points[_point].getPosition());
                }
                polyline.setMap(null);
                polyline = new google.maps.Polyline({
                    map: map,
                    path: latslens,
                    strokeColor: "#0000FF",//couleur du tracé
                    strokeOpacity: 0.65,//opacité du tracé
                    strokeWeight: 5//grosseur du tracé
                });
            }
/*

google.maps.event.addListener(point, 'dragend', function() {
polylineDisp();
var msg="";
for ( _point in points ){
msg = msg + points[_point].getTitle() + "\n"
}alert(msg);
});
                        for ( _point in points )
                        {
                            if ( points[_point] == this ) 
                            {
                                points[_point] = this;
                                break;
                            }
                        }
                        updateMarkerPosition(marker.getPosition());

            function markerDisp()
            {
                for (point in points){
                    new google.maps.Marker({
                        map: map,
                        draggable: true,
                        position: latlngPoints[mapCanvaspoint]
                    });
                }
            }

            function trajectoryDisp()
            {
                polylineDisp();
                markerDisp();
            }

            function displaylatlng() {
                alert("lat : " + latlng.lat().toString() + " , lng : " + latlng.lng().toString() + " coor : " + latlng.toString());
);
trajectoryDisp();
            }// onclick="displaylatlng();"

            function listlatlng() {
                var msg;
//"lat : " + latlng.lat().toString() + " , lng : " + latlng.lng().toString() + " coor : " + latlng.toString()
                for (point in latlngPoints){
                    msg = msg + latlngPoints[point].toString() + "\n"
                }
                alert(msg);
/*
var msg="";
for ( marker in markers ){
msg = msg + markers[marker].getTitle() + " " + latlngPoints[marker].toString() + "\n"
}alert(msg);

var msg="";
for ( point in latlngPoints ){
for ( var i = 0; i < latlngPoints.length; i++ )
msg = msg + markers[i].getTitle() + " " + latlngPoints[i].toString() + "\n"
}alert(msg);

var msg="";
for ( marker in markers ){
msg = msg + markers[marker].getTitle() + "\n"
}
for ( point in latlngPoints ){
msg = msg + latlngPoints[point].toString() + "\n"
}alert(msg);*/
//            }// onclick="listlatlng();"

        </script>
    </head>

    <body onload="initialize()">
        <div id="mapCanvas" style="width:100%; height:100%"></div>
        <noscript>
            <p>Attention : </p>
            <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
            <p>Or, il semble que JavaScript est désactivé ou qu\'il ne soit pas supporté par votre navigateur.</p>
            <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
        </noscript>
    </body>

</html>
